$primary-color: #8ac24e;
$secondary-color: #64b3f4;
$third-color: #d64680;

body {
  background-image: url(../img/peashooter3.png);
  background-repeat: no-repeat;
  background-size: 300px 300px;
  background-position: 0 200px;
  #zombie {
    position: absolute;
    right: -40px;
    top: 200px;
    width: 350px;
    height: 250px;
    z-index: -1;
  }

  main {
    .score-container {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 500px;
      padding: 10px;
      background-color: $primary-color;
      background-image: url(../img/exam-end.png);
      background-position: 562px -2px;
      background-repeat: no-repeat;
      border-radius: 10px;
      .score-panel {
        margin-bottom: 50px;
        width: 250px;
        height: 250px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        color: white;
        font-size: 22px;
        > div {
          width: 100%;
          text-align: center;
          &:first-of-type {
            font-size: 24px;
          }
          &:nth-of-type(2) {
            font-size: 46px;
            color: #fff;
          }
        }
        .score-info-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .info-box {
          width: 50%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          font-size: 18px;
          border-right: 2px solid rgba($color: #c1d2e6, $alpha: 0.35);
          &:last-of-type {
            border-right: 0;
          }
          .ib-row {
            width: 100%;
          }
        }
      }

      #btn-exam-detail {
        width: 135px;
        height: 40px;
        font-size: 18px;
        border: none;
        border-radius: 5px;
        background-color: #fff;
        &:hover {
          cursor: pointer;
        }
      }

      #btn-back-exam {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 120px;
        height: 30px;
        font-size: 18px;
        border: none;
        border-radius: 5px;
        background-color: #fff;
        &:hover {
          cursor: pointer;
        }
      }
    }
  }
}
